<template>
  <div class="user-panel">
    <div v-if="isLoggedIn" class="user-info">
      <el-dropdown trigger="click">
        <div class="user-avatar">
          <el-avatar :icon="UserFilled" :size="32"></el-avatar>
          <span class="username">{{ user.username }}</span>
          <el-tag v-if="isPro" type="success" size="small" effect="dark">PRO</el-tag>
        </div>
        <template #dropdown>
          <el-dropdown-menu>
            <el-dropdown-item @click="goToProfile">个人信息</el-dropdown-item>
            <el-dropdown-item v-if="!isPro" @click="upgradeToPro">升级会员</el-dropdown-item>
            <el-dropdown-item v-if="isPro" @click="goToMembership">会员权益</el-dropdown-item>
            <el-dropdown-item divided @click="handleLogout">退出登录</el-dropdown-item>
          </el-dropdown-menu>
        </template>
      </el-dropdown>
    </div>
    
    <div v-else class="auth-buttons">
      <router-link to="/login" class="login-link">
        <el-button class="login-btn">
          <span>登录</span>
        </el-button>
      </router-link>
      <router-link to="/register" class="register-link">
        <el-button type="primary" class="register-btn">
          <el-icon class="icon"><UserFilled /></el-icon>
          <span>注册</span>
        </el-button>
      </router-link>
    </div>
    
    <!-- 会员升级对话框 -->
    <el-dialog
      v-model="showUpgradeModal"
      title="升级到Pro会员"
      width="500px"
      :close-on-click-modal="false"
    >
      <div class="upgrade-content">
        <div class="upgrade-header">
          <h2>办公工具箱 Pro会员</h2>
          <div class="price">¥5 <span class="price-unit">/ 月</span></div>
        </div>
        
        <div class="benefits">
          <h3>Pro会员特权</h3>
          <ul>
            <li><el-icon><Check /></el-icon> 高级格式转换功能</li>
            <li><el-icon><Check /></el-icon> OCR文字识别功能</li>
            <li><el-icon><Check /></el-icon> PDF高级操作</li>
            <li><el-icon><Check /></el-icon> AI辅助生成功能</li>
            <li><el-icon><Check /></el-icon> 无广告体验</li>
            <li><el-icon><Check /></el-icon> 10GB云存储空间</li>
          </ul>
        </div>
        
        <div class="payment-actions">
          <el-button type="success" size="large" :loading="upgrading" @click="processUpgrade">立即升级</el-button>
          <el-button @click="showUpgradeModal = false">取消</el-button>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue';
import { useStore } from 'vuex';
import { useRouter } from 'vue-router';
import { ElMessage, ElMessageBox } from 'element-plus';
import { UserFilled, Check } from '@element-plus/icons-vue';

const store = useStore();
const router = useRouter();

// 用户状态相关
const isLoggedIn = computed(() => store.state.isLoggedIn);
const user = computed(() => store.state.user);
const isPro = computed(() => store.getters.isPro);

// 会员升级相关
const showUpgradeModal = ref(false);
const upgrading = ref(false);

// 退出登录
const handleLogout = () => {
  ElMessageBox.confirm('确定要退出登录吗？', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  })
    .then(() => {
      store.commit('logout');
      ElMessage.success('已退出登录');
      router.push('/');
    })
    .catch(() => {});
};

// 跳转到个人信息页面
const goToProfile = () => {
  router.push('/profile');
};

// 跳转到会员页面
const goToMembership = () => {
  router.push('/membership');
};

// 升级到Pro
const upgradeToPro = () => {
  showUpgradeModal.value = true;
};

// 处理升级
const processUpgrade = async () => {
  upgrading.value = true;
  
  try {
    await store.dispatch('upgradeMembership');
    ElMessage.success('恭喜您，已成功升级为Pro会员！');
    showUpgradeModal.value = false;
  } catch (error) {
    ElMessage.error('升级失败，请稍后再试');
  } finally {
    upgrading.value = false;
  }
};
</script>

<style scoped>
.user-panel {
  display: flex;
  align-items: center;
}

.user-info {
  cursor: pointer;
}

.user-avatar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 10px;
  border-radius: 30px;
  transition: all 0.3s ease;
}

.user-avatar:hover {
  background-color: rgba(var(--primary-color-rgb), 0.08);
}

.username {
  font-size: 14px;
  color: var(--black);
  font-weight: 500;
}

/* 新的登录和注册按钮样式 */
.auth-buttons {
  display: flex;
  gap: 12px;
  align-items: center;
}

.auth-buttons a {
  text-decoration: none;
}

.login-btn, .register-btn {
  height: 36px;
  border-radius: 18px;
  font-size: 14px;
  font-weight: 500;
  padding: 0 18px;
  transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.login-btn {
  color: var(--primary-color);
  background-color: transparent;
  border: 1px solid var(--primary-color);
}

.login-btn:hover {
  background-color: rgba(var(--primary-color-rgb), 0.05);
  transform: translateY(-2px);
  box-shadow: 0 2px 8px rgba(var(--primary-color-rgb), 0.1);
}

.register-btn {
  background: var(--primary-color);
  border: none;
  box-shadow: 0 4px 10px rgba(var(--primary-color-rgb), 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
}

.register-btn:hover {
  transform: translateY(-2px);
  background: var(--primary-dark);
  box-shadow: 0 6px 15px rgba(var(--primary-color-rgb), 0.3);
}

.register-btn .icon {
  font-size: 16px;
  margin-right: 4px;
}

/* 升级对话框样式 */

:deep(.el-dialog) {
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.15);
}

:deep(.el-dialog__header) {
  background-color: var(--primary-color);
  color: white;
  padding: 15px 20px;
  margin: 0;
}

:deep(.el-dialog__title) {
  color: white;
  font-weight: 600;
}

:deep(.el-dialog__headerbtn:hover .el-dialog__close) {
  color: white;
  transform: rotate(90deg);
  transition: transform 0.3s ease;
}

:deep(.el-dialog__body) {
  padding: 20px;
}

.upgrade-content {
  padding: 10px 20px 20px;
}

.upgrade-header {
  text-align: center;
  margin-bottom: 30px;
  position: relative;
}

.upgrade-header::after {
  content: '';
  position: absolute;
  bottom: -15px;
  left: 50%;
  transform: translateX(-50%);
  width: 60px;
  height: 3px;
  background: linear-gradient(90deg, var(--pro-color) 0%, var(--pro-light) 100%);
  border-radius: 3px;
}

.upgrade-header h2 {
  color: var(--pro-dark);
  margin-bottom: 15px;
  font-size: 24px;
}

.price {
  font-size: 42px;
  color: var(--pro-color);
  font-weight: 700;
  line-height: 1;
}

.price-unit {
  font-size: 16px;
  color: var(--dark-gray);
  font-weight: normal;
}

.benefits {
  margin-bottom: 30px;
  background-color: var(--pro-bg);
  padding: 20px;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

.benefits h3 {
  color: var(--pro-dark);
  margin-bottom: 20px;
  font-size: 18px;
  position: relative;
  padding-left: 15px;
}

.benefits h3::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 4px;
  height: 18px;
  background: var(--pro-color);
  border-radius: 2px;
}

.benefits ul {
  list-style: none;
  padding: 0;
}

.benefits li {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 15px;
  color: var(--black);
  transition: transform 0.2s ease;
}

.benefits li:hover {
  transform: translateX(5px);
}

.benefits li .el-icon {
  color: var(--pro-color);
  background-color: rgba(var(--pro-color-rgb), 0.1);
  border-radius: 50%;
  padding: 4px;
}

.payment-actions {
  display: flex;
  justify-content: center;
  gap: 15px;
  margin-top: 25px;
}

.payment-actions .el-button {
  border-radius: 8px;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.payment-actions .el-button--success {
  background: linear-gradient(45deg, var(--pro-color) 0%, var(--pro-light) 100%);
  border: none;
  box-shadow: 0 4px 12px rgba(var(--pro-color-rgb), 0.3);
  font-weight: 500;
  height: 44px;
}

.payment-actions .el-button--success:hover {
  box-shadow: 0 6px 16px rgba(var(--pro-color-rgb), 0.4);
  transform: translateY(-2px);
}

/* 响应式调整 */
@media (max-width: 576px) {
  .login-btn, .register-btn {
    padding: 0 12px;
  }
  
  .login-btn span {
    display: none;
  }
  
  .login-btn:before {
    content: '登录';
  }
}
</style> 